<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>大赢加讲师数据</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'AgencyDyjLecturerLecturerList' }">讲师发放管理</el-breadcrumb-item>
          <el-breadcrumb-item>兑换列表</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block number-box">
      <div
        v-for="(item, index) in numberList"
        :key="item.value + '_' + index"
        class="number-item"
      >
        <div class="number-style">{{ item.value }}</div>
        <div class="number-label">{{ item.label }}</div>
      </div>
    </div>
    <div class="base-block">

      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #code_type="{ row }">
          <div v-if="row.code_type === 0" class="flex-center">兑换码</div>
          <div v-else class="flex-center">渠道码</div>
        </template>
        <template #actions="s">
          <el-link v-if="s.row.code_type === 0" type="primary" @click="onClickDownloadItemData(s.row)">下载</el-link>
          <el-link v-if="s.row.code_type === 1" type="primary" @click="onClickView(s.row)">查看</el-link>
          <el-link v-if="s.row.code_type === 1" type="primary" @click="onClickEdit(s.row)">编辑</el-link>
          <el-link type="danger" status="danger" @click="onClickClear(s.row)">清空</el-link>
        </template>
      </KTable>
    </div>
    <!-- 查看兑换码 -->
    <QrCode
      v-model="showQrCode"
      :url="urlStr"
      :is-expire="isExpire"
    />
    <!-- 编辑 -->
    <EditModal ref="editModal" @success="methods.onSearch" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getLecSingleStat, batchAll, channelAll } from '@/api/crm-agency/dyj/lecturer';
import { lecturerExchangeListExport } from '@/api/crm-agency/download';
import { useTableList } from './hooks/use-table';
import { formatPercentUnit } from '@/utils';
import { baseConfirm } from '@crud/index';
import QrCode from '@/views/crm-agency/components/qr-code.vue';
import EditModal from './components/edit-modal.vue';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
defineOptions({ name: 'AgencyDyjLecturerExchangeList' });
const route = useRoute();
const agent_id = route.params.agent_id;
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: Record<string, any>) => {
    return {
      ...params,
      agent_id
    };
  }
});
const onClickDownloadItemData = (row: any) => {
  lecturerExchangeListExport({
    agent_id: agent_id,
    batch_id: row.batch_id
  });
};
// 查看
const showQrCode = ref(false);
const urlStr = ref('');
const isExpire = ref(false);
const onClickView = (row: any) => {
  showQrCode.value = true;
  urlStr.value = row.we_chat_qr_code;
  isExpire.value = row.is_expire;
};
// 编辑
const editModal = ref();
const onClickEdit = (row: any) => {
  editModal.value.show(1, { ...row, agent_id });
};
// 清空
const onClickClear = async (row: any) => {
  await baseConfirm({ title: '清空', message: '你确定清空？' });
  const reqParams: Record<string, any> = {
    agent_id
  };
  if (row.code_type === 0) {
    reqParams['batch_id'] = row.batch_id;
    await batchAll(reqParams);
  } else if (row.code_type === 1) {
    reqParams['channel_id'] = row.batch_id;
    await channelAll(reqParams);
  }
  ElMessage.success('清空成功');
  methods.getList();
};
//
const numberList = reactive([
  { label: '兑换总数', value: 0, attr: 'total' },
  { label: '兑换使用数', value: 0, attr: 'used' },
  { label: '使用率', value: 0, attr: 'used_percent', isPercent: true },
  { label: '兑换过期数', value: 0, attr: 'expire' },
  { label: '过期率', value: 0, attr: 'expire_percent', isPercent: true }
]);
const getStatus = async () => {
  const res = await getLecSingleStat({
    agent_id
  });
  const { err, data } = res;
  if (err) return;
  numberList.forEach((item: Record<string, any>) => {
    if (item.isPercent) item.value = `${formatPercentUnit(data[item.attr])}`;
    else item.value = data[item.attr];
  });
};
getStatus();
</script>
<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-box {
  box-sizing: border-box;
  display: flex;
  padding: 30px 20px;
  background: #fff;
  border-radius: 4px;

  .number-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - 40px) / 5);

    .number-style {
      margin-bottom: 20px;
      font-size: 22px;
      font-weight: 600;
    }

    .number-label {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
